<template>
  <div class="content">
    <div class="common-header-wrap">
      <mt-header class="common-header" :title="videoData.name">
        <mt-button icon="back" slot="left" @click="goBack"></mt-button>
      </mt-header>
    </div>
    <!-- v-show="video && type == 2" -->
    <video
      ref="video"
      style="background-color:#000"
      class="goodsdetail-video"
      id="video"
      :src="videoData.link? videoData.link : ''"
      :poster="videoData.image? videoData.image : ''"
      loop
      autoplay="autoplay"
      controls="controls"
      webkit-playsinline="true"
      x5-playsinline="true"
      x-webkit-airplay="true"
      playsinline="true"
    ></video>
    <div class="content-text">
      <h3>{{videoData.name}}</h3>
      <ul>
        <li class="love" @click="love">
          <img src="../../../assets/image/love.png" alt />
          <span>{{give_likes_num || videoData.give_likes_num}}</span>
        </li>
        <li class="watch">
          <img src="../../../assets/image/watch.png" alt />
          <span>{{videoData.visit_num}}</span>
        </li>
      </ul>
    </div>
    <div class="slot" v-html="content"></div>
    <!-- <div id="mse"></div> -->

    <!-- <div class="live-head-title">回播</div> -->
    <!-- <div
      class="live-repeat"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="10"
    > -->
      <!-- <div class="live-list" v-for="item in livelist" @click="toLive(item)"> -->
        <!--                <div class="live-repeat-type">·回播</div>-->
        <!-- <img class="live-list-img" :src="item.image" />
        <div class="live-list-foot">
          <div class="list-foot-text">
            <div class="list-foot-title">{{ item.name }}</div>
            <div class="list-foot-introduce">{{ item.brief }}</div>
          </div> -->
          <!-- <img class="list-foot-img" :src="item.head" /> -->
        <!-- </div> -->
      <!-- </div> -->
      <!-- <empty-record v-if="livelist.length <= 0 && !isMore"></empty-record> -->
    <!-- </div> -->
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import { getLiveList } from "../../../api/lives";
import { Toast, Indicator } from "mint-ui";
import {
  getPlayback,
  getChangeLikesNum,
  getChangeVisitNum,
} from "../../../api/lives";
import Player from "xgplayer";
export default {
  name: "Playback", //playback
  data() {
    return {
      livelist: [],
      title: this.$route.query.title ? this.$route.query.title : "盖碗茶盖碗茶",
      content: "",
      videoId: this.$route.query.video_Id ? this.$route.query.video_Id : "",
      videoData: "",
      give_likes_num: "",
      store_id: "1",
      keyword: "",
      params: {
        page: 0,
        per_page: 10,
      },
      loading: false, // 是否加载更多
      isMore: true, // 是否有更多
      param: 1, //直播类型 1:正在直播/2:直播回放
    };
  },
  created() {
    // this.getLiveList();
    this.getPlayback();
    // var videoTest = new Player({
    //   id: "videos",
    //   url: "https://myun-hw-s3.myun.tv/melj80jz/5vj2481n/1585557360106516259.m3u8",
    //   autoplay: true,
    // })
    // setTimeout(() => {
    //   let player = new Player({
    //     id: "mse",
    //     autoplay: true,
    //     url: this.videoData.link,
    //     playsinline: true,
    //     fitVideoSize: "auto",
    //     volume: 0.6,
    //     "x5-video-player-fullscreen": false,
    //     videoInit: true,
    //     poster: this.videoData.image,
    //   });
    //   player.play()
    // }, 3000);
  },
  computed: {
    ...mapState({
      info: (state) => state.member.info,
    }),
  },
  methods: {
    toLive(item) {
      getPlayback(item.id).then((res) => {
        console.log(res);
        if (res) {
          this.videoData = res.result[0];
          const regex = new RegExp("<img", "gi");
          this.content = res.result[0].lives_content.replace(
            regex,
            `<img style="max-width: 100%; height: auto"`
          );
          // this.content = res.result[0].lives_content;
          window.scrollTo(0,0);
        }
      });
    },
    loadMore() {
      console.log(111)
      this.loading = true;
      this.params.page = ++this.params.page;
      if (this.isMore) {
        console.log(23456)
        this.loading = false;
        this.getLiveList();
        this.isMore = false;
      }
    },
    //获取直播回放数据
    getLiveList() {
      getLiveList(this.params, this.keyword, 2).then((res) => {
        console.log(res);
        if (res.result.hasmore) {
          this.isMore = true;
        } else {
          this.isMore = false;
        }
        if (this.livelist) {
          this.livelist = this.livelist.concat(res.result);
        } else {
          this.livelist = res.result;
        }
      });
    },
    love() {
      getChangeLikesNum(this.videoId).then((res) => {
        console.log(res);
        if (res.code == 10000) {
          this.give_likes_num = res.message.give_likes_num;
        } else {
          Toast("点赞失败");
        }
      });
    },
    goBack() {
      this.$router.go(-1);
    },
    getPlayback() {
      getPlayback(this.videoId).then((res) => {
        console.log(res);
        if (res) {
          this.videoData = res.result[0];
          console.log(this.videoData);
          const regex = new RegExp("<img", "gi");
          this.content = res.result[0].lives_content.replace(
            regex,
            `<img style="max-width: 100%; height: auto"`
          );
          // this.content = res.result[0].lives_content;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
// #mse {
//   width: 100% !important;
//   height: 100px;
//   border: 1px solid black;
//   box-sizing: border-box;
//   margin-bottom: 200px;
// }
.goodsdetail-video {
  position: relative;
  width: 100%;
  height: 11.25rem !important;
  text-align: center;
  // margin-top: 2.1rem;
  .course-live {
    height: 100%;
    width: auto;
  }
  .course-play {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 16vw;
    height: 16vw;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 100px;
  }
}
.content-text {
  display: flex;
  width: 16.15rem;
  margin: 0.8rem auto;
  justify-content: space-between;
  align-items: center;
  h3 {
    margin: 0;
    height: 0.78rem;
    line-height: 0.78rem;
    overflow: hidden;
    font-size: 0.8rem;
    color: #101010;
  }
  ul {
    margin: 0;
    padding: 0;
    display: flex;
    vertical-align: middle;
    li {
      color: #b5b5b5;
      vertical-align: middle;
      span {
        font-size: 0.6rem;
      }
    }
    li.love {
      margin-right: 0.87rem;
    }
    li.love img {
      width: 0.62rem;
      margin-right: 0.4rem;
    }
    li.watch img {
      width: 0.75rem;
      margin-right: 0.4rem;
    }
  }
}
.slot {
  width: 16.15rem;
  margin: 0.8rem auto;
}

.live-repeat {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 2.8vw 4vw;

  .live-list {
    position: relative;
    // box-shadow: 0 0 10px #ccc;
    margin-top: 10px;
    .live-repeat-type {
      position: absolute;
      left: 10px;
      top: 10px;
      background: $primaryColor;
      color: white;
      font-size: 0.6rem;
      font-weight: bold;
      border-radius: 3px;
      padding: 5px 10px;
    }
    .live-list-img {
      width: 44vw;
      height: 33vw;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
    }
    .live-list-foot {
      padding: 10px 0;
      background: white;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .list-foot-text {
        width: calc(40vw - 20px);
        .list-foot-title {
          font-size: 0.7rem;
          line-height: 1rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .list-foot-introduce {
          font-size: 0.6rem;
          color: #b5b5b5;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .list-foot-img {
        width: 35px;
        height: 35px;
        border-radius: 50px;
      }
    }
  }
}

.live-head-title {
  width: 92vw;
  margin: auto;
  margin-top: 5vw;
  font-size: 0.8rem;
  font-weight: bold;
  border-left: 4px solid $primaryColor;
  padding-left: 10px;
  box-sizing: border-box;
  color: $primaryColor;
}
</style>